<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>人员添加页面</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <style>
    /* 容器基础样式 */
    .dia_y {
      width: 50%;
      margin: 1%;
      height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      /* border: 1px solid #ccc; /* 加上边框更贴近示例 */
      border-radius: 4px;
    }

    .dia_z {
      /* border: 2px solid #ccc; */
      width: 50%;
      margin: 1%;
      height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      /* 为子元素固定定位提供参考 */
    }

    .sticky-input {
      position: sticky;
      top: 0;
      /* 固定在容器顶部 */
      background: #fff;
      /* 背景色与容器一致 */
      z-index: 10;
      /* 确保输入框在树组件上方 */
      padding: 10px 0;
      /* 保持与原布局一致的间距 */
      border-bottom: 1px solid #eee;
      /* 可选：添加分隔线 */
    }

    .scroll-content {
      padding-top: 10px;
      /* 为固定输入框留出空间 */
      height: calc(100% - 50px);
      /* 滚动内容区域高度 */
    }

    /* 顶部统计栏 */
    .xuche {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }

    /* 多选框列表区域 */
    .checkbox-grid {
      padding: 10px 15px;
    }

    /* 调整多选框样式，让每个选项垂直分布更合理 */
    .el-checkbox {
      display: block;
      margin-bottom: 8px;
    }

    /* 滚动条样式（可选，让滚动条更美观） */
    .dia_y::-webkit-scrollbar {
      width: 6px;
    }

    .dia_y::-webkit-scrollbar-thumb {
      background-color: #c0c4cc;
      border-radius: 3px;
    }

    .dia_y::-webkit-scrollbar-track {
      background-color: #f5f7fa;
    }
  </style>
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">工作队员信息</div>
      </div>
    </header>

    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'work_teams', 'form': 'dataForm','primary_key':'Work_Team_SerialNumber' })">

      <div class="yl-main">

        <el-dialog v-model="dialogFormVisible" title="工作队员" width="800">
          <div style="display: flex;justify-content: center;">
            <div class="dia_z">
              <!-- 固定的输入框 -->
              <div class="sticky-input">
                <el-input style="width: 95%;" placeholder="输入关键字进行过滤" v-model="filterText">
                </el-input>
              </div>

              <!-- 滚动内容区域 -->
              <div class="scroll-content">
                <el-tree class="filter-tree" :data="data" :props="{ label:'Party_Organization_Name'}" default-expand-all
                  :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
                </el-tree>
              </div>
            </div>
            <div class="dia_y">
              <div class="checkbox-container">
                <!-- 顶部已选统计和清空按钮 -->
                <div class="xuche">
                  <div>已选中&nbsp;{{ selectedCount }}&nbsp;个</div>
                  <div><el-button type="primary" icon="close" @click="clearAll">清空</el-button></div>
                </div>
                <!-- 多选框列表 -->
                <div class="checkbox-grid">
                  <el-checkbox v-for="(option, index) in checkboxOptions" :key="index" v-model="option.checked"
                    :label="option.Personal_Name" :size="option.size"
                    :disabled="option.ID_Card_Number === currentCaptainId"
                    :class="{ 'text-red': option.ID_Card_Number === currentCaptainId }"
                    @change="handleCheckboxChange(option)">
                    {{ option.Personal_Name }}
                    <span v-if="option.ID_Card_Number === currentCaptainId" style="color: red;">(负责人)</span>
                  </el-checkbox>
                </div>
              </div>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->
              <el-button type="primary" @click="dialogFormVisible = false">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
        <span style="font-size: 26p;font-weight: 800; display: inline-block;margin: 10px;">选择工作队负责人</span>
        <el-form :model="{childDataForm}" ref="form1" :inline-message="true" style="width: 100%">
          <el-descriptions id="MainTable"
            :data-options="JSON.stringify({ 'TableName': 'work_teams_members', 'form': 'childDataForm', 'primary_key': 'Work_Team_Member_SerialNumber'})"
            :column="3" size="large" border class="descriptions-even-columns"
            v-for="(item, index) in childDataForm.filter(item => item.Row_Status != '1')" :key="index">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">负责人</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.ID_Card_Number'"
                :rules="[{ required: true, message: '请选择负责人', trigger: 'change' }]" prop="ID_Card_Number">
                <el-select v-model="item.ID_Card_Number" placeholder="请选择" @change="handleSelectMember(item, $event)"
                  @clear="handleClearMember(item)" filterable>
                  <el-option v-for="item in checkboxOptions2" :key="item.ID_Card_Number" :label="item.Personal_Name"
                    :value="item.ID_Card_Number">
                  </el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">身份证号</div>
              </template>
              <el-form-item prop="ID_Card_Number">
                <el-input v-model="item.ID_Card_Number" class="borderless-input" placeholder="身份证号" :disabled="true" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">成员类型</div>
              </template>
              <el-form-item prop="fzrm">
                <el-input :disabled="true" class="borderless-input" v-model="fzrm"></el-input>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">联系电话</div>
              </template>
              <el-form-item prop="Mobile">
                <el-input v-model="item.Mobile" class="borderless-input" placeholder="请输入联系电话" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">职务</div>
              </template>
              <el-form-item prop="Position">
                <el-select v-model="item.Position" placeholder="请选择" @change="handlePositionChange(item, $event)">
                  <el-option v-for="position in positions" :key="position.value" :label="position.label"
                    :value="position.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">驻村开始时间</div>
              </template>
              <el-form-item prop="Start_Date">
                <el-date-picker v-model="item.Start_Date" type="date" class="borderless-input" placeholder="选择日期"
                  :allow-empty="true" style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  @change="handleDateChange(item, 'Start_Date', $event)">
                </el-date-picker>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">来源单位</div>
              </template>
              <el-form-item prop="Agensies_Name">
                <el-input v-model="item.Agensies_Name" class="borderless-input"  :disabled="true" />
              </el-form-item>
            </el-descriptions-item>


          </el-descriptions>
        </el-form>

         <header>
      <div class="m-toolbar panel-header panel-header-noborder " style="margin-top: 30px;" >
        <div class="m-title">工作队成员信息</div>
      </div>
    </header>
        <el-button type="primary" style="margin-top: 20px; width: 120px;" @click="xin()">新增工作队成员</el-button>
        <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
          <el-table-column prop="ID_Card_Number" label="身份证编号" align="center">
          </el-table-column>
          <el-table-column prop="Personal_Name" label="队员姓名" align="center">
          </el-table-column>
          <el-table-column prop="Mobile" label="联系电话" align="center">
          </el-table-column>
          <el-table-column label="成员类型" align="center" header-align="center">
            <template #default="scope">
              <span>普通成员</span>
            </template>
          </el-table-column>
          <el-table-column label="职务" align="center" header-align="center">
            <template #default="scope">
               <!-- {{ scope.row.Position}} -->
              <el-select v-model="scope.row.Position" placeholder="请选择"
                @change="handlePositionChange(scope.row, $event)">
                <el-option v-for="item in positions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="驻村开始时间" align="center" header-align="center">
            <template #default="scope">
              <el-date-picker v-model="scope.row.Start_Date" type="date" placeholder="选择日期" :allow-empty="true"
                style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                @change="handleDateChange(scope.row, 'Start_Date', $event)">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="Agensies_Name" label="来源单位" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../yl/vue.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/ID_Validity.js"></script>
<script src="../../../utils/utils.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/memberAdd.js"></script>

</html>